<template>
	<div>
		<div class="head">
			<router-link class="operating" tag="span" to="/Login">{{$t('Register.v1')}}</router-link>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="title-hd">{{$t('Register.v2')}}</div>
				<div class="main">
					<van-cell-group>
						<van-field v-model.trim="Account" maxlength="20" :placeholder="$t('Register.v3')" clearable />
					</van-cell-group>
					<van-cell-group>
						<van-field v-model.trim="Pwd" type="password" :placeholder="$t('Register.v4')" maxlength="20" clearable />
					</van-cell-group>
					<van-cell-group>
						<van-field v-model.trim="Pwd2" type="password" :placeholder="$t('Register.v5')" maxlength="20" clearable />
					</van-cell-group>

					<van-cell-group>
						<van-field v-model.trim="InviteCode" :placeholder="$t('Register.v6')" maxlength="18" clearable />
						<div class="qr" @click="toQr()" v-if="showQR == 0">
							<img src="../assets/images/l-qr2.png" />
						</div>
						</van-field>
					</van-cell-group>
				</div>
				<div class="Protocol">
					<check-icon @click.native="checkClick" :value.sync="check"></check-icon>
					<span @click="checkAgree"><span>{{$t('Register.v7')}}</span><span>《{{$t('Register.v8')}}》</span></span>
				</div>
				<div class="btn">
					<van-button slot="button" size="normal" type="info" :loading="loading" :loading-text="$t('Register.v9')" @click.native="Register">{{$t('Register.v9')}}</van-button>
				</div>
			</div>
		</div>
		<!-- 用户协议 -->
		<div class="checkPopup">
			<popup v-model="agree" position="bottom" should-scroll-top-on-show>
				<div>
					<h2>{{$t('Register.v10')}}</h2>
					<div class="checkContent" v-html="protocol"></div>
				</div>
				<div style="padding: 15px;">
					<van-button slot="button" size="normal" type="info" @click.native="agreeCheck">{{$t('Register.v11')}}</van-button>
				</div>
			</popup>
		</div>
		<van-popup v-model="show" style="width: 100%;height: 100%;border-radius: 5px;background: #2c3145;text-align: left;" :close-on-click-overlay="false">
			<div style="padding: 15px 25px;color:white;background: #2c3145;text-align: center;">
				<span>{{$t('Register.v12')}}</span>
			</div>
			<div style="color: white;font-size: 13px;background: #2c3145;">
				<div align="center" style="padding-top: 30px;padding-bottom: 10px;margin-left: 15px;margin-right: 15px;">
					<img src="../assets/images/zjc.png" style="width: 80px;height: 80px;"/>
					<div style="font-size: 16px;">{{$t('Register.v13')}}</div>
					<div style="padding-top: 10px;font-size: 14px;">{{$t('Register.v14')}}</div>
				</div>
				<van-grid :column-num="5" style="padding-top: 10px;padding-bottom: 10px;border-top: 1px solid #383f56;border-bottom: 1px solid #383f56;margin-left: 10px;margin-right: 10px;">
					<van-grid-item v-for="(item,index) in list" :key="Math.random()">
					    <div style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;background: rgb(93,107,151);">
					    	<span v-text="item"></span>
					    </div>
					</van-grid-item>
				</van-grid>
				<div style="padding: 10px 15px;color: #3FB776;">
					<div>{{$t('Register.v15')}}！</div>
				</div>
				<div>
					<div id="copyText" v-text="listCopy" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
				</div>
				<div style="padding: 10px 70px;">
					<van-button slot="button" size="normal" type="info" style="height: 38px;line-height: 36px;" @click="sure">{{$t('Register.v16')}}</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	let _this;
	import { CheckIcon, Popup } from 'vux';
	import { base } from './../utils/api';
	export default {
		name: 'Register',
		components: {
			CheckIcon,
			Popup
		},
		data() {
			return {
				show: false,
				showQR: 0,
				check: true, // 勾选
				agree: false, // 弹出层
				Account: '', // 账号
				Pwd: '', // 密码
				Pwd2: '', // 确认密码
				InviteCode: '', // 邀请码
				protocol: '', // 协议
				loading: false,
				agreeId: 0,
				showSelect: false,
				k: '', // 凭证K值
				v: '', // 凭证V值
				list: [],
				listCopy: ''
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			if(window.plus) {
				this.showQR = 0;
			} else {
				this.showQR = 1;
			}
			// 调用扫一扫功能判断 codeResult 是否有值
			if(sessionStorage.codeResult) {
				this.InviteCode = sessionStorage.codeResult.split('id=')[1];
				sessionStorage.removeItem('codeResult');
			}
			// 把点击扫一扫前保存的数据赋值上去
			if(sessionStorage.registerInfo) {
				this.Account = sessionStorage.registerInfo.split('&')[0];
				this.Pwd = sessionStorage.registerInfo.split('&')[1];
				this.Pwd2 = sessionStorage.registerInfo.split('&')[2];
				sessionStorage.removeItem('registerInfo');
			}
		},
		methods: {
			// 弹出层
			checkAgree() {
				// 注册协议
				base.getRegisterDiscovers().then(res => {
					if(res.code == 200) {
						this.agree = true;
						this.protocol = res.data.value;
					}
				})
			},
			agreeCheck() {
				this.agree = false;
				this.check = true;
				if(this.check) {
					this.agreeId = 1
				} else {
					this.agreeId = 0
				}
			},
			checkClick() {
				if(this.check) {
					this.agreeId = 1
				} else {
					this.agreeId = 0
				}
			},
			toQr() {
				sessionStorage.setItem('registerInfo', this.Account + '&' + this.Pwd + '&' + this.Pwd2);
				this.$router.push({
					path: '/Qr'
				})
			},
			// 注册
			Register() {
				// 判断账号
				if(this.Account == '') {
					this.$toast(this.$t('Register.v17'));
					return false;
				} else {
					if(this.Account.length < 4 || this.Account.length > 20) {
						this.$toast(this.$t('Register.v18'));
						return false;
					}
				}
				// 判断密码和确认密码
				if(this.Pwd == '') {
					this.$toast(this.$t('Register.v19'));
					return false;
				} else {
					if(this.Pwd.length < 6 || this.Pwd.length > 20) {
						this.$toast(this.$t('Register.v20'));
						return false;
					}
				}
				if(this.Pwd != this.Pwd2) {
					this.$toast(this.$t('Register.v21'));
					return false;
				}
				// 判断邀请码
				if(this.InviteCode == '') {
					this.$toast(this.$t('Register.v22'));
					return false;
				}
				// 协议
				if(!this.check) {
					this.$toast(this.$t('Register.v23'));
					return false;
				}
				this.loading = true;
				// 注册
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						base.getRegister({
							'userName': this.Account,
							'code': this.InviteCode,
							'encryptedData': this.rsaEncrypt(this.Pwd + ',' + this.Pwd2 + ','+ this.v),
							'key': this.k
						}).then(res => {
							if(res.code == 200) {
								this.list = res.data.trim().split(" ");
								this.listCopy = res.data;
								this.show = true;
							}
							this.$toast(res.msg);
							this.loading = false;
						})
					}
				})
			},
			sure() { // 复制助记词
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$toast(_this.$t('Register.v24'));
						setTimeout(() => {
							_this.$router.push('/Login');
							_this.show = false;
						}, 1000);
					} catch(err) {
						_this.$toast(_this.$t('Register.v25'));
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$toast(_this.$t('Register.v24'));
					setTimeout(() => {
						_this.$router.push('/Login');
						_this.show = false;
					}, 1000);
				}
			}
		},
		watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			Pwd: function() {
				this.Pwd = this.Pwd.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Pwd2: function() {
				this.Pwd2 = this.Pwd2.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Account: function() {
				this.Account = this.Account.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
			},
			InviteCode: function() {
				this.InviteCode = this.InviteCode.replace(/[\u4e00-\u9fa5]/ig, ''); // 邀请人 ID 不能输入中文
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.title {
		font-size: 15px;
		padding: 10px;
		text-align: right;
	}

	.weui-cells:after {
		left: 15px;
		right: 15px;
	}

	.weui-cells .weui-cell {
		padding: 15px 0;
	}

	.main {
		margin: 0 20px;
		overflow: hidden;
	}

	.btn {
		padding: 20px;
	}

	.text {
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}

	.qr {
		position: absolute;
		right: 0;
		top: 0;
		img {
			width: 26px;
			padding: 9px;
		}
	}

	.Protocol {
		padding: 10px 20px;
		font-size: 12px;
		min-height: 24px;
		span {
			text-decoration: underline;
			// color: #3673f7;
		}
	}

	/deep/ .weui-icon-circle {
		font-size: 17px;
	}

	/deep/ .weui-icon-success {
		font-size: 17px;
	}

	/deep/ .vux-check-icon>.weui-icon-success:before,
	.vux-check-icon>.weui-icon-success-circle:before {
		color: #09BB07;
	}

	/deep/ .weui-btn_plain-primary {
		color: #ff5555;
		border-color: #ff5555;
	}

	/deep/ .weui-btn_mini {
		font-size: 12px !important;
	}

	// 用户协议
	.checkPopup {
		font-size: 14px;
		h2 {
			text-align: center;
			padding: 10px 0;
		}
		.checkContent {
			padding: 0 15px 10px;
		}
	}

	.content-add {
		/deep/ .weui-cell__bd {
			margin-right: 35px;
		}
	}

	input {
		padding: 15px 10px;
	}

	.checkPopup {
		/deep/ .vux-popup-dialog {
			background: #fff;
		}
	}

	.address {
		/deep/ .weui-cells {
			padding: 15px 10px;
		}
		/deep/ .weui-cells span:after {
			content: " ";
			display: inline-block;
			height: 6px;
			width: 6px;
			border-width: 2px 2px 0 0;
			border-color: #C8C8CD;
			border-style: solid;
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
			position: absolute;
			top: 22px;
			margin-top: -2px;
			margin-left: 10px;
		}
	}

	.head~.overlay {
		top: 45px;
	}

	.logo {
		width: 30%;
		display: block;
		margin: 5% auto 5%;
	}

	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 5px 20px 20px;
	}

	/deep/.vux-tap-active:active {
		background: none !important;
	}

	/deep/.weui-cell_access .weui-cell__ft:after {
		right: 15px;
	}

	/deep/.van-cell:not(:last-child)::after {
		border-bottom: 0;
	}

	/deep/ .van-grid-item__content {
		background: #2c3145;
		padding: 10px 5px;
	}

	/deep/ .van-hairline--top::after {
		border: 0;
	}

	/deep/ .van-grid-item__content::after {
		border: 0;
	}

	/deep/ .van-grid-item__content {
		float: left;
	}
</style>
